﻿<!DOCTYPE html>
<html lang="en">

<head>
  <title>Photo - DiQuick</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="keywords" content="keywords">
  <meta name="description" content="description"> 
  <link rel="stylesheet" href="https://unpkg.com/diquick@1.4.10/diquick.css">
  <style>
    /*--header--*/
    .header {margin:2rem 0;}
    .header .logobar {margin-bottom:2rem;}
    .header .logobar .box {padding:0 3.5rem;}
    .header .logobar .logo img {max-width:50%;}
    .header .logobar .login {margin-bottom:1rem;text-align:right;} 
    .header .logobar .search {padding-left:50%;text-align:right;}
    .header .logobar .search>input {width:calc(100% - 3rem);background-color:inherit;}
    .header .logobar .search>i {margin-left:.5rem;color:#1fbeec;vertical-align:middle;font-size:1.125rem;cursor:pointer;}
    .header .logobar .search>i:hover {color:#333;}
    .header .navbar {background-image:linear-gradient(to bottom,#3e3e3e,#333);background-image:-webtki-linear-gradient(top,#3e3e3e,#333);}
    .header .navbar .menu {background-color:transparent;color:#1fbeec;}
    @media screen and (max-width:750px) {
    .header .logobar .box {padding:0;}
    .header .logobar .logo {margin-bottom:1rem;text-align:center;}
    .header .logobar .login {text-align:center;}
    .header .logobar .search {padding-left:0;text-align:center;}
    .header .navbar .menu>div {padding:1rem .5rem;font-size:1.25rem;}
    }
    /*--footer--*/
    .footer {padding:1.5rem 0;background-color:#f1f2f4;}
  </style>
</head>

<body>

  <div class="wrapper">
    <!-- header begin -->
    <div class="header">
      <div class="logobar">
        <div class="shell">
          <div class="box">
            <div class="grid grid-s100 logo">
              <img src="../images/logo.png">
            </div>
            <div class="grid grid-s100">
              <div class="login">
                <div class="dropmenu">
                  <span><i class="flaticon-user151 mr3"></i>Login</span>
                  <ul>
                    <li data-open-dialog="login">Sign In</li>
                    <li data-open-dialog="login">Register now</li>
                  </ul>
                </div>
              </div>
              <div class="search">
                <input type="text" placeholder="Search" class="noborder"><i class="flaticon-search86 disabled"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="navbar">
        <div class="shell">
          <div class="menu row grow">
            <div class="notlist"><a>Home</a></div>
            <div>
              <a>Snow</a>
              <ul>
                <li><a>menu item</a></li>
                <li><a>menu item</a></li>
                <li><a>menu item</a></li>
              </ul>
            </div>
            <div>
              <a>Lake</a>
              <ul>
                <li><a>menu item</a></li>
                <li><a>menu item</a></li>
                <li><a>menu item</a></li>
              </ul>
            </div>
            <div>
              <a>Night</a>
              <ul>
                <li><a>menu item</a></li>
                <li><a>menu item</a></li>
                <li><a>menu item</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- header end -->
    <!-- main begin -->
    <div class="main">
      <div class="shell">
        <h2 class="tc mb9">Landscape</h2>
        <div class="list">
          <ul class="box-array list3 list-s1 plr">
            <li>
              <div class="media zoom">
                <div class="img">
                  <img data-open-dialog="img@" src="../images/img1024-1.jpg">
                </div>
                <div class="content">
                  <h4><a>Beach Ice</a></h4>
                  <p>Snow peaks stand like handle blades straight into the clouds. The shining white snow and the bright sunshine are shining against each other, especially against the dark blue sky.</p>
                </div>
              </div>
            </li>
            <li>
              <div class="media zoom">
                <div class="img">
                  <img data-open-dialog="img@" src="../images/img1024-2.jpg">
                </div>
                <div class="content">
                  <h5><a>Winter Scapes</a></h5>
                  <p>Snow peaks stand like handle blades straight into the clouds. The shining white snow and the bright sunshine are shining against each other, especially against the dark blue sky.</p>
                </div>
              </div>
            </li>
            <li>
              <div class="media zoom">
                <div class="img">
                  <img data-open-dialog="img@" src="../images/img1024-3.jpg">
                </div>
                <div class="content">
                  <h4><a>Fresh Snow Over Peyto Lake</a></h4>
                  <p>Snow peaks stand like handle blades straight into the clouds. The shining white snow and the bright sunshine are shining against each other, especially against the dark blue sky.</p>
                </div>
              </div>
            </li>
            <li>
              <div class="media zoom">
                <div class="img">
                  <img data-open-dialog="img@" src="../images/img1024-4.jpg">
                </div>
                <div class="content">
                  <h4><a>A Moraine Morning</a></h4>
                  <p>Snow peaks stand like handle blades straight into the clouds. The shining white snow and the bright sunshine are shining against each other, especially against the dark blue sky.</p>
                </div>
              </div>
            </li>
            <li>
              <div class="media zoom">
                <div class="img">
                  <img data-open-dialog="img@" src="../images/img1024-5.jpg">
                </div>
                <div class="content">
                  <h5><a>Aurora over Jokulsarlon</a></h5>
                  <p>Snow peaks stand like handle blades straight into the clouds. The shining white snow and the bright sunshine are shining against each other, especially against the dark blue sky.</p>
                </div>
              </div>
            </li>
            <li>
              <div class="media zoom">
                <div class="img">
                  <img data-open-dialog="img@" src="../images/img1024-6.jpg">
                </div>
                <div class="content">
                  <h4><a>Mountain Church</a></h4>
                  <p>Snow peaks stand like handle blades straight into the clouds. The shining white snow and the bright sunshine are shining against each other, especially against the dark blue sky.</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="mb7 tc">
          <span class="loading"></span>
        </div>
      </div>
    </div>
    <!-- main end -->
    <!-- footer begin -->
    <div class="footer">
      <div class="shell">
        <p>Copyright © 2019 Web Inc. All rights reserved.</p>
      </div>
    </div>
    <!-- footer end -->
    <!-- login[dialog] begin -->
    <div id="login" class="dialog">
      <div class="content tc">
        <h6 class="mb7">Sign In</h6>
        <ul class="form ratio100">
          <li>
            <span>Username</span>
            <div class="icon"><i class="flaticon-user151"></i><input name="name" type="text"></div>
          </li>
          <li>
            <span>Password</span>
            <div class="icon"><i class="flaticon-locked44"></i><input name="password" type="password"></div>
          </li>
          <li>
            <div><label class="line"><input type="checkbox">Remember me</label></div>
          </li>
          <li>
            <div class="tc"><button type="button" class="btn" data-close-dialog data-open-message="success">Sign In</button></div>
          </li>
        </ul>
      </div>
    </div>
    <!-- login[dialog] end -->
    <!-- success[message] begin -->
    <div name="success" class="message fade bg-green c-white" data-close-timeout="1000">
      <p><i class="flaticon-information59 mr3"></i>Successful operation.</p>
    </div>
    <!-- success[message] end -->
  </div>

  <script src="https://unpkg.com/diquick@1.4.10/diquick.js"></script>
</body>

</html>